<template>
    <div>
        <el-form :inline="true" :model="formUser" size="mini">
            <el-form-item label="用户名">
                <el-input v-model="formUser.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="requestSearchUser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="userListData"
                size="small"
                style="width: 100%">
            <el-table-column
                    prop="mail"
                    label="用户名"
            >
            </el-table-column>
            <el-table-column
                    prop="inviterId"
                    label="邀请人"
            >
                <template slot-scope="scope">
                    <template v-for="(item,key) of userMapData">
                        <template v-if="scope.row.inviterId == key">
                            <span>{{item}}</span>
                        </template>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="邀请时间"
            >
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetUserList(pagination.prePage)"
                @next-click="requestGetUserList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>

    let api = '/manager/user';

    export default {
        name: "UserInvite",
        data() {
            return {
                userListData: [],
                userMapData: {},
                formUser: {
                    userName: '',
                },
                pagination: {
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                },

            }
        },
        mounted() {
            this.requestGetUserList(this.pagination.pageNum);
        },
        methods: {
            requestGetUserList(page) {
                this.requestAxios.requestCMS('post', api + '/invite_list.do', {
                    page: page,
                    size: this.pagination.pageSize,
                    userName: this.formUser.userName,
                }, (response) => {
                    console.log(response);
                    let data = response.data.pageList;
                    this.userListData = data.list;
                    this.userMapData = response.data.userMap;
                    this.pagination.total = data.total;
                    this.pagination.prePage = data.prePage;
                    this.pagination.pageNum = data.pageNum;
                    this.pagination.nextPage = data.nextPage;
                })
            },

            requestSearchUser() {
                this.requestGetUserList(1);
            },

            requestStatueChange(row, status) {
                this.requestAxios.requestCMS('post', api + '/validate.do', {
                    id: row.id,
                    status: status,
                }, (response) => {
                    this.$message.success(response.message);
                    this.requestGetUserList(this.pagination.pageNum)
                })
            },


            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetUserList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetUserList(page)
            }
        }
    }
</script>

<style scoped>
    .table-expand {
        display: flex;
        justify-content: space-between;
    }
</style>
